<%--
  Created by IntelliJ IDEA.
  User: 凡人
  Date: 2021/11/13
  Time: 14:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>下单</title>
    <link href="${pageContext.request.contextPath}/static/css/index3.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.js" rel="script"></script>
</head>
<body>
    <form action="./add" method="post">
        <table class="table table-hover">
            <tr>
                <td>订单编号</td>
                <td colspan="8">${orderId}</td>
            </tr>
            <tr>
                <th scope="col">商品名称</th>
                <th scope="col">商品价格</th>
                <th scope="col">购买数量</th>
                <th scope="col">商品图片</th>
                <th scope="col">生产日期</th>
                <th scope="col" colspan="2">备注
                    <input type="button" onclick="add(this)" value="添加商品">
                </th>
            </tr>
            <tbody id="tbody">
                <tr>
                    <td>
                        <input type="text" name="goods[0].goodsName">
                    </td>
                    <td>
                        <input type="text" name="goods[0].goodsPrice" style="width: 150px">
                        <input name="goods[0].goodsTotal" type="hidden" value="500">
                    </td>
                    <td>
                        <input type="text" name="goods[0].goodsNum" style="width: 100px">
                    </td>
                    <td>
                        <input name="file" type="file" onchange="upFile('goods[0].goodsPicture',this)">
                        <input type="hidden" name="goods[0].goodsPicture">
                    </td>
                    <td>
                        <input type="text" name="goods[0].goodsDate">
                    </td>
                    <td>
                        <input type="text" name="goods[0].goodsMark">
                    </td>
                    <td></td>
                </tr>
            </tbody>
            <tr>
                <td colspan="100">
                    <input type="submit" value="提交">
                </td>
            </tr>
        </table>
    </form>
</body>
<script>
    var i=1;
    function add(val,obj){
        $("#tbody").append('<tr>\n'+
            '<td><input type="text" name="goods['+i+'].goodsName"></td>'+
            '<td><input type="text" name="goods['+i+'].goodsPrice" style="width: 150px"><input name="goods['+i+'].goodsTotal" type="hidden"></td>'+
            '<td><input name="goods['+i+'].goodsNum" style="width: 100px"></td>' +
            '<td><input name="file" type="file" onchange="upFile(\'goods['+i+'].goodsPicture\',this)"><input type="hidden" name="goods['+i+'].goodsPicture"></td>'+
            '<td><input name="goods['+i+'].goodsDate"></td>'+
            '<td><input name="goods['+i+'].goodsMark"></td>'+
            '<td><input type="button" onclick="del(this)" value="删除"></td>'+
        '</tr>');
        i++;
    }
    function del(obj){
        $(obj).parent().parent().remove();
    }
    function upFile(fname,obj){
        var formData = new FormData();
        formData.append("file",obj.files[0]);
        $.ajax({
            url:"upFile",
            type:"post",
            data:formData,
            processData:false,
            contentType:false,
            success:function(msg){
                if(msg!=null && msg!="") {
                    alert(msg)
                    $("[name='" + fname + "']").val(msg);
                    $("[name='" + fname + "']").after("<img src='" + msg + "' width='50px' height='50px'>");
                }else{
                    alert("请上传图片格式");
                    $("[name='"+ fname +"']").after("");
                    $("img").remove();
                }
            }
        })
    }
</script>
</html>
